<template>
	<view>
		<view class="wanl-product">
			<!-- #ifndef MP-TOUTIAO -->
			<view class="product_warter" :class="dataStyle"
				v-if="dataStyle == 'col-2-10' || dataStyle == 'col-2-15' || dataStyle == 'col-2-20' || dataStyle == 'col-2-25' || dataStyle == 'col-2-30'">
				<wanl-waterfall :flowList="dataList">
					<template v-slot:left="{ leftList }">
						<view class="warter left" v-for="(item, index) in leftList" :key="index" @click="onFind(item)">
							<view class="img-wrap">
								<image class="image" :src="item.image_url" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<text>{{ item.title }}</text>
								</view>
								<div class="find_box_item_more">
									<div>
										<image src="../../static/images/new/sc_selected.png" v-if="item.isFollow"
											@click.stop="onFollow(item)"></image>
										<image src="../../static/images/new/sc.png" v-else @click.stop="onFollow(item)">
										</image>
										<text>{{item.follows}}</text>
									</div>
									<div>
										<image src="../../static/images/new/dz_selected.png" v-if="item.isLike"
											@click.stop="onLike(item)"></image>
										<image src="../../static/images/new/dz.png" v-else @click.stop="onLike(item)">
										</image>
										<text>{{item.like}}</text>
									</div>
								</div>
								<view class="text-sm wanl-gray">
									<text>{{item.user}}</text>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="warter right" v-for="(item, index) in rightList" :key="index" @click="onFind(item)">
							<view class="img-wrap">
								<image class="image" :src="item.image_url" mode="widthFix"></image>
							</view>
							<view class="content padding-bj">
								<view class="text-cut-2">
									<text>{{ item.title }}</text>
								</view>
								<div class="find_box_item_more">
									<div>
										<image src="/static/images/new/sc_selected.png" v-if="item.isFollow"
											@click.stop="onFollow(item)"></image>
										<image src="/static/images/new/sc.png" v-else @click.stop="onFollow(item)">
										</image>
										<text>{{item.follows}}</text>
									</div>
									<div>
										<image src="/static/images/new/dz_selected.png" v-if="item.isLike"
											@click.stop="onLike(item)"></image>
										<image src="/static/images/new/dz.png" v-else @click.stop="onLike(item)">
										</image>
										<text>{{item.like}}</text>
									</div>
								</div>
								<view class="text-sm wanl-gray">
									<text>{{item.user}}</text>
								</view>
							</view>
						</view>
					</template>
				</wanl-waterfall>
			</view>
			<!-- 普通布局 -->
			<view class="product_list" :class="dataStyle" v-else>
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="onFind(item)">
					<view class="img-wrap">
						<image :src="$wanlshop.oss(item.images[0], 125, 125)" mode="aspectFill"></image>
					</view>
					<view class="content padding-sm">
						<view class="">
							<view class="text-cut-2">
								<text>{{ item.title }}</text>
							</view>
						</view>
						<div class="find_box_item_more">
							<div>
								<image src="/static/images/new/sc_selected.png" v-if="item.isFollow"
									@click.stop="onFollow(item)"></image>
								<image src="/static/images/new/sc.png" v-else @click.stop="onFollow(item)">
								</image>
								<text>{{item.follows}}</text>
							</div>
							<div>
								<image src="/static/images/new/dz_selected.png" v-if="item.isLike"
									@click.stop="onLike(item)"></image>
								<image src="/static/images/new/dz.png" v-else @click.stop="onLike(item)">
								</image>
								<text>{{item.like}}</text>
							</div>
						</div>
						<view class="text-sm wanl-gray">
							<text>{{item.user}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- 兼容字节跳动小程序 -->
			<!-- #ifdef MP-TOUTIAO -->
			<view class="product_list" :class="dataStyle">
				<view class="item" v-for="(item, index) in dataList" :key="index" @click="onFind(item)">
					<view class="img-wrap">
						<image :src="$wanlshop.oss(item.images[0], 125, 125)" mode="aspectFill"></image>
					</view>
					<view class="content padding-sm">
						<view class="">
							<view class="text-cut-2">
								<text>{{ item.title }}</text>
							</view>
						</view>
						<div class="find_box_item_more">
							<div>
								<image src="../../static/images/new/sc_selected.png" v-if="item.isFollow"
									@click.stop="onFollow(item)"></image>
								<image src="../../static/images/new/sc.png" v-else @click.stop="onFollow(item)">
								</image>
								<text>{{item.follows}}</text>
							</div>
							<div>
								<image src="../../static/images/new/dz_selected.png" v-if="item.isLike"
									@click.stop="onLike(item)"></image>
								<image src="../../static/images/new/dz.png" v-else @click.stop="onLike(item)">
								</image>
								<text>{{item.like}}</text>
							</div>
						</div>
						<view class="text-sm wanl-gray">
							<text>{{item.user}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	/**
	 * wanlFind 动态
	 * @description 动态组件
	 * @property {Array} dataList 列表数据
	 * @property {String} dataStyle 列表样式
	 * @example <wanl-find />
	 */
	export default {
		name: 'wanlFind',
		props: {
			dataList: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			dataStyle: {
				type: String,
				default: 'col-2-20'
			},
		},
		methods: {
			// 调用父组件中的方法fatherMethod
			onFollow(item) {
				this.$emit("onFollow",item);
			},
			onLike(item) {
				this.$emit("onLike",item);
			},
		}
	};
</script>
<style lang="scss" scoped>
	.find_box_item_more {
		padding: 10upx 0;
		height: auto;
		overflow: hidden;
		display: flex;
		align-items: center;

		div {
			display: flex;
			align-items: center;
			margin-right: 40upx;

			image {
				width: 24upx;
				height: 24upx;
			}

			text {
				margin-left: 8upx;
				font-size: 24upx;
				font-weight: 400;
				color: #4F4F4F;
			}
		}
	}

	.text-sm {
		font-size: 20upx;
	}
</style>
